<template>
	<view>
		<view class="topBg">
			<!-- 搜索 -->
			<view class="index_search">
				<view class="index_searchTop">
					<input placeholder="输入搜索的内容"  />
				</view>
				<view class="index_hotSearch">
					热搜：<text v-for="(item,index) in hotSearchArr">{{ item }}</text>
				</view>
			</view>
			<!-- 轮播 -->
			<view >
				<swiper class="swiper" indicator-color="#dddddd" indicator-active-color="#ffffff" :indicator-dots="top_silder.length >1?true:false" circular="true" autoplay="true"  >
					<swiper-item v-for="(item, index) in  top_silder" :key="index" >
						<image class="slide-image" :src="item" lazy-load="true" mode="aspectFill"></image> 
					</swiper-item>
				</swiper>  
			</view> 
			<!-- 导航 -->
			<swiper  class="swiper-type swiper-nav" :indicator-dots="top_menu.length >10?true:false" indicator-color="#eaeaea" indicator-active-color="#06C1AE" :style="sliderH"> 
				<swiper-item v-for="(sliderItem, index) in slider" :key="index" >
					<view class="type-list clearfix">
						<view class="item" v-for="item in sliderItem" :key="">
							<image :src="item.pic" :lazy-load="true" style="width: 50px; height: 50px;"></image>
							<view class="desc">{{ item.name }}</view>  
						</view> 
					</view>
				</swiper-item>
			</swiper>
			<!--  导航 end-->  
		</view>
		<!-- 小轮播 -->
		<swiper class="swiper_smbanner" autoplay="true"  >
			<swiper-item v-for="(item, index) in  top_silder" :key="index" >
				<image class="slide-image" :src="item" lazy-load="true" mode="aspectFill"></image> 
			</swiper-item>
		</swiper>  
		<!-- 小轮播 end--> 
		<view>
			<scroll-view class="classScroll" scroll-x> 
				<view class="classType" v-for="(item,index) in classArr">
					<text class="bigTil">{{  }}精选</text> 
					<text class="smallTil">{{  }}为你推荐</text>
				</view> 
			</scroll-view>
		</view>
		<productList></productList> 
	</view>
</template>

<script>
	import productList from './productList'
	var that
	export default{
		data(){
			return{
				hotSearchArr:['滑板车','滑板车','滑板车','滑板车'],
				top_silder:['http://o2o-static.pigcms.com/upload/adver/000/000/001/5e855a1bb5c88366.png','static/bg.png'],
				slider:[],
				sliderItem:[],
				sliderH:'',
				top_menu:[
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					},
					{
						name:'拼团专场',
						pic:'' 
					},
					{
						name:'拼团专场',
						pic:'static/bg.png' 
					}
				],
				classArr:[
					{},{},{},{},{},{},{},{},{},{},{},{},{},{}
				]
			}
		},
		components:{
			productList
		},
		onLoad() {
			that = this
			var slider = [];
			that.sliderH = 'height:calc(268rpx + 46px);';
			var top_menu = that.top_menu 
			if(top_menu){
				var n = parseInt(top_menu.length / 10);  
				if (n == 0) {
					slider[0] = top_menu.slice(0);
				} else {
					for (var i = 0; i < n; i++) {
						slider[i] = top_menu.slice(i * 10, (i + 1) * 10); 
						if (i + 1 == n && n * 10 < top_menu.length) {
							slider[n] = top_menu.slice(n * 10);
						}
					}
				} 
				console.log(slider)
				that.slider=slider
				if (top_menu.length == 0) {
					sliderH = 'height:0;padding-top:0;';
				} else if (top_menu.length <= 5) {
					sliderH = 'height:calc(154rpx + 17px);';
				} else if (top_menu.length <= 10) {
					sliderH = 'height:calc(248rpx + 34px);';
				}
			} 
		}
	}
</script>

<style scoped>
	.topBg{
		background: url(static/topBg.png) top center no-repeat,#fff;
		background-size: 100% auto;
	}
	.index_search{
		margin: 0 20rpx;
		padding: 20rpx 0 0 0;
	}
	.index_search .index_searchTop{
		background-color: #fff; 
		height:66rpx; 
		border:7rpx solid rgba(255,255,255,1); 
		border-radius:40rpx;
	} 
	.index_search .index_searchTop input{
		line-height: 66rpx;
		height:66rpx; 
		padding-left: 50rpx;
		margin-left: 20rpx;
		border-radius:40rpx;
		background: url(./static/icon_search.png) left center no-repeat,#fff;
		background-size: 30rpx 30rpx; 
	}
	.index_search .index_hotSearch{
		color: #fff;
		margin: 20rpx 0;
	}
	.index_search .index_hotSearch text{
		background:rgba(249,249,249,0.9); 
		border-radius:30rpx;
		color: #666;
		font-size:20rpx;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
	}
	.swiper{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius:20rpx;
	}
	.swiper image.slide-image{
		width: 100%;
		height: 280rpx;
		border-radius:20rpx;
		display: block;
		padding: 0;
	}
	.swiper-nav{
		background: #fff;
		padding: 20px 10px 10px 10px; 
	}
	.type-list .item{
	    width: 20%;
	    float: left;
	    text-align: center;
	    padding-bottom: 11px;
	    position: relative;
	    padding-bottom: 10px;
	}
	.type-list .item .desc{
		word-break:keep-all;/* 不换行 */
		white-space:nowrap;/* 不换行 */
		overflow:hidden;
		text-overflow:ellipsis;
		font-size: 14px;
	}
	.swiper-nav .uni-swiper-dots .uni-swiper-dot{
		width: 20px!important;
		height: 4px;
	}
	.swiper_smbanner{
		padding: 20rpx;
		height: 175rpx;
	}
	.swiper_smbanner image{
		width: 100%;
		height: 175rpx;
		border-radius:20rpx;
	}
	.classScroll{
		height: 60px;
		margin-bottom: 20rpx;
	}
	.classScroll .classType{
		display: inline-block;
		text-align: center;
		padding: 0 20rpx;
	}
	.classScroll .bigTil{
		font-size:36rpx; 
		font-weight:bold; 
		color: #333333;
		line-height:34px;
		display: block;
	}
	.classScroll .smallTil{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		/* color:rgba(6,193,174,1); */
		line-height:34rpx;
	}
</style>
